<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px">
            <el-form-item label="角色名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="英文简称" prop="shortName">
                <el-input v-model="ruleForm.shortName"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="description">
                <el-input v-model="ruleForm.description"></el-input>
            </el-form-item>
            <el-form-item label="是否启用">
                <el-radio v-model="ruleForm.status" label="ENABLED">启用</el-radio>
                <el-radio v-model="ruleForm.status" label="DISABLED">禁用</el-radio>
            </el-form-item>
            <!-- <el-form-item label="角色类型" prop="type">
                <el-radio v-model="ruleForm.type" label="0">平台后台角色</el-radio>
                <el-radio v-model="ruleForm.type" label="1">寺庙后台角色</el-radio>
            </el-form-item> -->
            <el-form-item label="分配菜单权限" prop="type">
                <el-cascader v-model="selectTree" :options="menuTree" :props="{ multiple: true, label: 'title', value: 'id' }" @change="onSelectTree" style="width: 300px;"></el-cascader>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :loading="loading" @click="sub('ruleForm')">确定</el-button>
                <el-button @click="onCancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { apiRoleMenuList, apiRoleEdit } from "@/api/admin.js";
export default {
    name: "role_index_edit",
    props: {
        editItem: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            menuTree: [],
            selectTree: [],
            ruleForm: {
                id: "",
                name: "",
                shortName: "",
                description: "",
                status: "ENABLED",
                // type: "PLATFORM", //角色类型（PLATFORM-平台 MERCHANT-商家）
            },
            rules: {
                name: [{ required: true, message: "请输入角色名称", trigger: "change" }],
                shortName: [{ required: true, message: "请输入英文简称", trigger: "change" }],
            },
            loading: false,
        }
    },
    created() {
        this.setForm()
    },
    watch: {
        editItem() {
            this.setForm()
        }
    },
    methods: {
        setForm() {
            const { id, name, shortName, description, status } = this.editItem
            this.ruleForm = { id, name, shortName, description, status }
            apiRoleMenuList({ roleId: id }).then(({ data }) => {
                for (let a = 0; a < data.length; a++) {
                    const children1 = data[a].children;
                    for (let b = 0; b < children1.length; b++) {
                        const children2 = children1[b].children;
                        for (let c = 0; c < children2.length; c++) {
                            delete children2[c].children; //删除默认children
                        }
                    }
                }
                // 初始化已勾选
                const list = []
                for (let a = 0; a < data.length; a++) {
                    if (data[a].hasMenu == 1) {
                        const arr = [0, 0, 0]
                        arr[0] = data[a].id
                        const children1 = data[a].children
                        for (let b = 0; b < children1.length; b++) {
                            if (children1[b].hasMenu == 1) {
                                arr[1] = children1[b].id
                                const children2 = children1[b].children
                                for (let c = 0; c < children2.length; c++) {
                                    if (children2[c].hasMenu == 1) {
                                        arr[2] = children2[c].id
                                        list.push(JSON.parse(JSON.stringify(arr)))
                                    }
                                }
                            }
                        }
                    }
                }
                // console.warn('list', list);
                this.selectTree = list
                this.menuTree = data;
            });
        },
        onSelectTree(e) {
            // console.warn('e', e);
            let list = []
            for (let index = 0; index < e.length; index++) {
                list = [...list, ...e[index]]
            }
            list = new Set([...list])
            // console.warn('list', list);
            this.ruleForm.menuIdList = Array.from(list)
        },
        // 确定
        sub(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.loading = true;
                    apiRoleEdit(this.ruleForm).then((res) => {
                        this.$message({ message: "操作成功", type: "success" });
                        this.loading = false;
                        this.$emit("onSubmit");
                    }).catch((err) => {
                        this.loading = false;
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        // 取消
        onCancel() {
            this.loading = false;
            this.$emit("onCancel");
        },
        // 重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
}
</script>

<style></style>